<template>
  <div>
    <quill-editor
      ref="text"
      v-model="content"
      class="myQuillEditor"
      :options="editorOption"
    />
    <el-button type="primary" @click="submit">提交</el-button>
    <section  class="ql-editor"  v-html="value01">
      <!-- <div></div> -->
    </section>
  </div>
</template>

<script>
import { quillEditor } from "vue-quill-editor";
// import "quill/dist/quill.core.css";
// import "quill/dist/quill.snow.css";
// import "quill/dist/quill.bubble.css";
import { tutorialstest_role, tutorialschakan_role } from "@/api/role.js";
export default {
  data() {
    return {
      content: "",
      editorOption: {},
      value01: "",
    };
  },
  methods: {
    submit() {
      console.log(this.editorOption);

      tutorialstest_role({
        content: this.$refs.text.value,
      }).then((res) => {
        tutorialschakan_role({
          list: res.data.list,
        }).then((restu) => {
          // console.log(restu);
          this.value01 = restu[0].content;
        });
      });
    },
  },
  components: {
    quillEditor,
  },
};
</script>

<style lang='less' scoped>
/deep/.quill-editor .ql-image{
  display: none;
}
</style>
